<template>
	<view class="container content-list" v-if="listData">
		<zero-waterfall :isMask="false" @onItem="onItem" :list="listData" ref="waterFall">
			<view class="box" v-for="(item, index) of listData" :key="index" slot="slot{{item.id}}">
				<view class="title text-ellipsis">{{item.title}}</view>
				<view class="desc">
					<view class="font">
						<image style="width: 40rpx;height: 40rpx;border-radius: 50%;" :src="item.user_avatar" mode="">
						</image>
						<span class="name">{{item.nick_name}}</span>
					</view>
					<view class="views">
						<image style="width: 28rpx;height: 28rpx;" src="@/static/icon_show.png" mode="">
						</image>
						<span class="browse">{{item.browse || 0}}</span>
					</view>
				</view>

			</view>
		</zero-waterfall>

		<cu-empty tips="这里什么也没有~" v-if="listData && listData.length == 0"></cu-empty>
		<u-loadmore v-else :status="refreshStatus" />
		<cu-button-wrap>
			<u-button :customStyle="{width:'670rpx',height:'104rpx',borderRadius:'104rpx'}" type="primary" text="发布祭奠"
				@click="onJumpAdd"></u-button>
		</cu-button-wrap>
	</view>
</template>

<script>
	import wContainer from '@/components/simple-waterfall/w-container.vue'
	import wItem from '@/components/simple-waterfall/w-item.vue'
	const iconShow = require('@/static/icon_show.png')
	import {
		mapState,
		mapActions
	} from 'vuex';
	import Refresh from '@/mixins/refresh'
	export default {
		mixins: [Refresh],
		components: {
			wContainer,
			wItem
		},
		data() {
			return {
				iconShow,
				listData: null,
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onShow() {
			this.getList(false)
		},
		onLoad(opions) {

		},
		destroyed() {

		},
		methods: {
			onJumpAdd() {
				this.$Jump.Open('/pages/release/add/add?type=2')
			},
			onItem(item) {
				let id = item.id
				this.$Jump.Open('/pages/index/postDetail?id=' + id + "&isTool=1&type=2")
			},
			getList(status) {
				this.$Net.get(this.$api.post_list_jd, {
					...this.searchReq
				}).then(res => {
					res.list.map(item => {
						if (item.cover) {
							item['url'] = item.cover;
						} else if (item.imgs) {
							item['url'] = item.imgs.split(",")[0];
						} else {
							item['url'] = ''
						}
						return item
					});
					this.setStatus(res.count, res.list, status);
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {}

	.content-list {
		flex: 1;
		overflow: auto;

		.box {
			width: 100%;
			padding-top: 18rpx;
			margin-bottom: 20rpx;

			.title {
				color: rgba(0, 0, 0, 0.80);
				font-family: "PingFang SC";
				font-size: 30rpx;
				font-weight: 400;
			}

			.desc {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 12rpx;
				width: 100%;
				color: rgba(0, 0, 0, 0.50);
				font-family: "PingFang SC";
				font-size: 26rpx;

				.font,
				.views {
					display: flex;
					align-items: center;

					span {
						margin-left: 12rpx;
					}
				}
			}
		}
	}
</style>